<template>
    <view class="chat-container">
        <view class="chat-header">
			<text style="margin-top: 10px;">聊天大厅</text>
        </view>
		<button type="primary" @click="onlineUsersLive">查看在线人数列表</button>
        <view class="chat-messages" ref="chatMessagesRef">
            <!-- 这里可以添加显示聊天消息的逻辑 -->
            <view v-for="(message, index) in chatMessages" :key="index" class="chat-message">
                <view v-if="message.from === 'me'" class="chat-message-me">
                    <text>{{ message.content }}</text>
                </view>
                <view v-else class="chat-message-other">
                    <image :src="message.avatar" style="width: 30px; height: 30px; border-radius: 50%; display: inline-block; margin-right: 5px;" />
                    <text>{{ message.content }}</text>
                </view>
            </view>
            <text v-if="chatMessages.length === 0">暂无聊天消息</text>
        </view>
        <view class="chat-input">
            我：
            <input v-model="inputMessage" placeholder="请输入聊天内容" />
            <button size="mini" @click="sendMessage">发送</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            avatar: '/static/images/user01.jpg',
            chatMessages: [],
            inputMessage: ''
        };
    },
    methods: {
		onlineUsersLive(){
			uni.navigateTo({
				url:"/pages/onlineUsersList/onlineUsersList"
			})
		},
        sendMessage() {
            if (this.inputMessage.trim() === '') {
                return;
            }
            const newMessage = {
                from: 'me',
                content: "我：" + this.inputMessage,
                avatar: this.avatar
            };
            this.chatMessages.push(newMessage);
            // 模拟对方回复
            const otherMessage = {
                from: this.username,
                content: '收到消息，正在处理...',
                avatar: this.avatar ,// 这里可以替换为对方真实头像
            };
            this.chatMessages.push(otherMessage);
            this.inputMessage = '';

            // 自动滚动到最新位置
            this.$nextTick(() => {
                const chatMessagesRef = this.$refs.chatMessagesRef;
                chatMessagesRef.scrollTop = chatMessagesRef.scrollHeight;
            });
        }
    }
};
</script>

<style>
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 设置容器高度为视口高度 */
}

.chat-header {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
}

.chat-messages {
    padding: 10px;
    flex: 1; /* 占据剩余空间 */
    overflow-y: auto; /* 当内容超过时显示垂直滚动条 */
}

.chat-message {
    margin-bottom: 10px;
}

.chat-message-me {
    text-align: right;
}

.chat-message-other {
    display: flex;
    align-items: center;
}

.chat-input {
    display: flex;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #ccc;
    background-color: #f5f5f5;
    position: fixed; /* 固定在底部 */
    bottom: 0; /* 底部对齐 */
    width: 100%; /* 宽度占满屏幕 */
}

.chat-input input {
    /* 调整宽度，这里设置为70%，你可以根据需要调整 */
    flex: 0 0 70%; 
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.chat-input button {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #007AFF;
    color: white;
    border: none;
    border-radius: 5px;
}
</style>